

/* 特定颜色 */
:root{
    --orange:#fd7e14;
    --white:#FFFCFD;
    --black:#1E1E1E;
    --orange2:#CA6510;
    --gary:#212529;
}


/* 特定背景颜色 */
.bgx-gary{
    background-color: var(--gary) !important;
}
.bgx-orange{
    background-color: var(--orange) !important;
}
.bgx-black{
    background-color: var(--black) !important;
}
.bgx-white{
    background-color: var(--white);
}

/* 特定文字颜色 */
.tx-black{
  color: var(--black) !important;  
}
.tx-white{
    color: var(--white);
}





/* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 */
/* 导航悬停特效 */
.hdxz{
    color: var(--black) !important;
    background-color: var(--orange) !important;
}
.hdxz:hover{
    background-color: var(--orange2) !important;
}


/* 导航副悬停特效 */
.hdxf{
    color: var(--white) !important;
}
.hdxf:hover{
    color: var(--orange) !important;
}


/* 下拉菜单悬停特效 */
.hdxd{
    color: var(--white) !important;
}
.hdxd:hover{
    background-color: var(--orange) !important;
    color: var(--black) !important;
}
/* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 *//* 头部 */



/* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 *//* 轮播图 */
section:nth-child(2){
    position: relative;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10%;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 1rem;
    margin-left: 15%;
    list-style: none;
}




.gs-prex{
    position: absolute;
    display: block;
    width: 100%;
    height: 10%;
    bottom: 0;
    background: url(../images/arrow-bar-left.svg) no-repeat;
    background-size: 100%;
    background-color: var(--black);
    background-position: 0 20px;
}

.gs-prex li{
    list-style: none;
    float: left;
}












/* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 */




.nav-pills .active{
    color: var(--black) !important;
    background:none !important;
    border-bottom: 5px solid var(--orange);
}
.nav-pills button{
    color: var(--black) !important;
}




.ahover img{
    max-width: 160px;
}






.ahover:hover img{
    transition: transform 1s ease-in-out;
    transform: scale(1.2);
}

.ahover:hover::after{
    transition: transform 1s ease-in-out;
    background-color: rgba(95, 89, 89, 0.392);
    animation: bofang 0.5s ease-in-out;
    animation-fill-mode:forwards;
}

.ahover::after{
    content: "";
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background: no-repeat;
    background: url(../images/skip-start-btn.svg ) no-repeat;
    background-size: 0% 0%;
    background-position: 50%;
}

@keyframes bofang{
    0%{background-size: 0% 0%}
    100%{background-size: 50% 50%;}
}
.tab-content a{
    color: var(--black);
    text-decoration: none;
}
.tab-content a:hover{
    color: var(--orange);
}


/* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 *//* 推荐歌单 */

/* 排行榜 *//* 排行榜 *//* 排行榜 *//* 排行榜 *//* 排行榜 *//* 排行榜 *//* 排行榜 *//* 排行榜 */


.card hr{
    border: 3px solid ;
}

.card a{
    text-decoration: none;
}

.card a:hover p{
    color: var(--orange) !important;
}








.phb1{
    background: no-repeat;
    background-image: url(../images/bg_index_top.5314c494.webp);
    background-size:500% 35rem;
}
.phb2{
    background: no-repeat;
    background-image: url(../images/bg_index_top.5314c494.webp);
    background-size:500% 35rem;
    background-position: 25% 0;
}
.phb3{
    background: no-repeat;
    background-image: url(../images/bg_index_top.5314c494.webp);
    background-size:500% 35rem;
    background-position: 50% 0;
}
.phb4{
    background: no-repeat;
    background-image: url(../images/bg_index_top.5314c494.webp);
    background-size:500% 35rem;
    background-position: 75% 0;
}
.phb5{
    background: no-repeat;
    background-image: url(../images/bg_index_top.5314c494.webp);
    background-size:500% 35rem;
    background-position: 100% 0;
}


/* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 *//* 排行榜手机 */


.phbsj-img{
    min-width: 8rem;
    max-width: 10rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    background: url(../images/bg_index_top.5314c494.webp);
}














/* 歌手 *//* 歌手 *//* 歌手 *//* 歌手 *//* 歌手 *//* 歌手 *//* 歌手 *//* 歌手 */

.geshou{
    position: relative;
}

.gs-pre{
    position: absolute;
    display: block;
    width: 5%;
    height: 50%;
    top: 10%;
    background: url(../images/arrow-bar-left.svg) no-repeat;
    background-size: 100%;
    background-color: rgba(94, 82, 82, 0.138);
    background-position: 0 20px;
}

.gs-next{
    position: absolute;
    display: block;
    width: 5%;
    height: 50%;
    top: 10%;
    background: url(../images/arrow-bar-right.svg) no-repeat;
    background-size: 100%;
    background-color: rgba(94, 82, 82, 0.138);
    right: 0;
    background-position: 0 20px;
}






/* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 */


footer{
    display: flex;
    justify-content: center;
    align-content: center;
}

footer ul{
    font-size: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer ul li{
    margin: 1px;
    list-style: none;
    float: left;
}
footer a,span{
    text-decoration: none;
    color: gray;
}
footer a:hover{
    color: white;
}










/* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 *//* 尾部 */

/* 播放器 *//* 播放器 *//* 播放器 *//* 播放器 *//* 播放器 *//* 播放器 */
.player{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    box-sizing: border-box;
    background: none;
}
.player:hover{
    height: 10rem;
}
.player .img{
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(25%);
}

.player .img img{
    width: 100px;
    height: 100px;
}

.player .info{
    transition: all 0.5s ease-in-out;
    transform: translateY(25%);
}
.player:hover .info{
    transform: translateY(0%);
}

.info .progress{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info .progress #end,
.info .progress #start {
}

.info .progress #bar{
    background-color: rgb(222, 230, 238) !important;
}

.info .song-detail{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.info .song-detail span{
    margin: 4px 0;
    height: 16px;
    user-select: none;
}

.info .song-detail #title{
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
}

.info .song-detail #author{
    letter-spacing: 1px;
}

.info .controls{
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.info .controls span i{
    font-size: 2rem;
    color: var(--black);
    cursor: pointer;
    user-select: none;
}
.play span{
    margin: 0 5px;
}


.player input[type="range"]{
    background-color: var(--black);
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
}
.player .volume-c{
    background-color: var(--black);
    height: 2px;
    width: 50%;
}

.player input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 10px;
    width: 10px;
    background-color: var(--white);
    border-radius: 50%;
    cursor: pointer;
}

/* 隐藏audio */

.audio{
    display: none;

}


